html{
  height:100%;
}
body{
  height: 100%;

  margin:0;
  dispaly:flex;
  align-items: center;
  justufy-content: center;
}
#canvas{
  background-color:rgb(245, 245, 245);
  width: 100vmin;
  height:100vmin;
  position:relative;}

#secondring{
  background-color:rgb(71,128,99);
  position:relative;
  left:0vmin;
  top: -100vmin;
  width: 25vmin;
  height:25vmin;
} 

#thirdring{
  background-color:rgb(232,215,83);
  position:relative;
  left:38vmin;
  top: -125vmin;
  width: 25vmin;
  height:25vmin;
} 

#fourthing{
  background-color:rgb(71,76,124);
  position:relative;
  left:75vmin;
  top: -150vmin;
  width: 25vmin;
  height:25vmin;
} 

#fifthing{
  background-color:rgb(103,156,203);
  position:relative;
  left:0vmin;
  top: -137vmin;
  width: 25vmin;
  height:25vmin;
} 

#sixthing{
  background-color:rgb(193,103,50);
  position:relative;
  left:0vmin;
  top: -125vmin;
  width: 25vmin;
  height:25vmin;
} 

#seventhing{
  background-color:rgb(46,48,47);
  position:relative;
  left:38vmin;
  top: -187vmin;
  width: 25vmin;
  height:25vmin;
} 
#eighthing{
  background-color:rgb(183,66,43);
  position:relative;
  left:75vmin;
  top: -212vmin;
  width: 25vmin;
  height:25vmin;
} 
#mintgreen{
  background-color:rgb(173,192,138);
  position:relative;
  left:38vmin;
  top: -200vmin;
  width: 25vmin;
  height:25vmin;
} 

#last{
  background-color:rgb(100, 84, 136);
  position:relative;
  left:75vmin;
  top: -225vmin;
  width: 25vmin;
  height:25vmin;
}